<template>
    <el-dialog class="assign-dialog" :model-value="timeDialog" title="预约时间" width="460px" :draggable="true"
        :destroy-on-close="true" @close="onCancel" :close-on-click-modal="false" :align-center="true">

        <div v-loading="loading" element-loading-text="加载中...">

            <el-form label-width="auto" ref="formRef" :model="ruleForm" :rules="rules">
                <el-form-item label="预约上门日期" prop="date">
                    <el-date-picker v-model="ruleForm.date" value-format="YYYY-MM-DD" type="date" placeholder="预约上门日期"
                        size="small" />
                </el-form-item>
                <el-form-item label="预约上门时间" prop="reservationStartTime">
                    <el-time-select v-model="ruleForm.reservationStartTime" :max-time="ruleForm.reservationEndTime"
                        placeholder="请选择开始时间" start="06:00" step="01:00" end="22:00" style="width: 150px;" />
                    <span style="padding: 0 5px;"> ~ </span>
                    <el-time-select v-model="ruleForm.reservationEndTime" :min-time="ruleForm.reservationStartTime"
                        placeholder="请选择结束时间" start="06:00" step="01:00" end="22:00" style="width: 150px;" />
                </el-form-item>
                <el-form-item label="预约留言">
                    <el-input v-model="ruleForm.remark" maxlength="200" placeholder="请输入预约留言" show-word-limit
                        type="textarea" resize="none" />
                </el-form-item>
            </el-form>
            <div class="footer">
                <el-button color="#007cff" class="btn_save" @click="onSave">保存</el-button>
                <el-button @click="onCancel" class="btn_cancel"> 取消 </el-button>
            </div>
        </div>
    </el-dialog>
</template>
<script  setup lang="ts">
import { ref, toRefs, watch, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
// import { reservationTime } from '../../../../../api/order'
const props = defineProps({
    timeDialog: Boolean,
    workId: [String, Object],
})
const { workId, timeDialog } = toRefs(props)
const emits = defineEmits(['time-dialog', 'update-list', 'refreshOperationLogList'])
const loading = ref(false)
const onsaveloading = ref(false)

const formRef = ref()
const ruleForm = reactive({
    "date": "",
    "remark": "",
    "reservationStartTime": "",
    "reservationEndTime": "",
    "workId": workId.value
})
const rules = reactive({
    date: [{ required: true, message: '请选择预约上门日期！', trigger: ['blur', 'change'] }],
    reservationStartTime: [{ required: true, message: '请选择预约上门时间！', trigger: ['blur', 'change'] }],
    reservationEndTime: [{ required: true, message: '请选择预约上门时间！', trigger: ['blur', 'change'] }],
})

// 保存
const onSave = () => {
    formRef.value.validate(async (valid) => {
        if (valid) {
            loading.value = true
            let data: any = ruleForm
            // await reservationTime(data).then(res => {


            //     if (res.data.success) {
            //         ElMessage({
            //             message: res.data.message,
            //             type: res.data.success ? 'success' : 'error',
            //             duration: 4000,
            //             offset: 200,
            //             showClose: true,
            //         })
            //         onCancel()
            //     }
            // })
            loading.value = false
        } else {
            return false
        }
    })
}
const onCancel = () => {
    formRef.value.resetFields()
    emits('time-dialog')
}
</script>
<style lang="scss" scoped>
.el-form-item {
    margin-bottom: 20px;
}

.footer {
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .btn_save {
        width: 60px;
    }

    .btn_cancel {
        width: 60px;

        &:hover {
            border: 1px solid #e5e5e5;
            color: #999;
            background-color: #e5e5e5;
        }
    }
}

@import '../index.scss'
</style>